<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head >
    <title>添加关键词</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script>
        var index = 0;
        try{
            index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        }catch (e) {
        }
    </script>
</head>
<body >

<div class="layui-body">
    <style>
        .a-input {
            height: 36px;
            line-height: 36px;
            margin-bottom: 20px;
        }

        .a-input span {
            display: inline-block;
            width: 100px;
            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }

        .a-input input {
            border: 1px solid #dcdcdc;
            height: 22px;
            line-height: 22px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            border: 1px solid #dcdcdc;
            height: 36px;
            line-height: 36px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            width: 260px;
        }

        .textarea-box{
            display: flex;

            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }
        .textarea-box span{
            width: 100px;
            margin-right: 20px;
        }
        .textarea-box textarea{
            border:1px solid #ccc;
            border-radius: 8px;
            padding: 5px;
        }
        .content-title {
            font-weight: bold;
            padding: 20px 40px;
            font-size: 16px;
        }
        .bussiness-table{
            width: 95%;
            margin: 0 auto;
        }
        .bussiness-table input{
            border: none;
            min-width:300px ;
            height: 36px;
            padding: 0 15px;
        }
        .bussiness-total-box{
            margin-left: 40px;
            margin-top: 30px;
        }
        .total-number{
            color: red;
            font-weight: bold;
            font-size: 16px;
        }
        .order-save{
            margin: 30px 150px
        }

    </style>
    <style>
        .sp-tree {
            display: none;
            position: absolute;
            z-index: 199999999;
            width: 300px;
            /*height: 100px;*/
            padding: 10px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #d3d3d3;
        }

        .sp-tree li {
            position: relative;
            font-size: 12px;
            line-height: 20px;
            padding-left: 20px
        }

        .sp-tree li li {
            border-left: 1px solid #ccc;
        }

        .sp-tree li h3 {
            font-weight: normal;
            cursor: pointer;
        }

        .sp-tree li h3 b {
        }

        .sp-tree li h3 b:hover {
            text-decoration: underline;
        }

        .sp-tree li i {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 16px;
            font-weight: bold;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .sp-tree li ul {
            display: none;
        }
    </style>
    <div class="sp-wrapper">
        <div class="order-body">

            <form method="post" class="layui-form" id="sp-form">

                <div class="layui-form-item">
                    <label class="layui-form-label">来源：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="source" value="TAOBAO" title="淘宝" checked>
                        <input type="radio" name="source" value="PDD" title="拼多多">
                        <input type="radio" name="source" value="QITA" title="其他" >
                    </div>
                </div>

                
                <div class="layui-form-item">
                    <label class="layui-form-label">分类：</label>
                    <div class="layui-input-inline" id="categoryDIV">
                        <input type="text" id="sp-sort" name="category" placeholder="请选择分类" class="layui-input" lay-verify="required" autocomplete="off" readonly>
                        <input type="hidden" name="categoryId" id="categoryId" value="0"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">搜索人气</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sousuorenqi" lay-verify="required|number" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">点击人气</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dianjirenqi" lay-verify="required|number" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">点击率</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dianjilv" lay-verify="required|number" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">支付转化率</label>
                    <div class="layui-input-inline">
                        <input type="text" name="zhifulv" lay-verify="required|number" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收录日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="include_date" id="include_date" lay-verify="required" readonly placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="add_btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>

    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'form','layer'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var layer = layui.layer;

            //执行一个laydate实例
            laydate.render({
                elem: '#include_date' //指定元素
            });

            form.on('submit(add_btn)', function(data){
                console.log(data.field);
                $.ajax({
                    type:"POST",
                    url:"/big_data/keyword_add_ajax",
                    processData: false, //表明不要对数据进行处理
                    data:JSON.stringify(data.field),
                    contentType: 'application/json',
                    success:function (res) {
                        if(res.code == 0){
                            parent.layer.msg(res.msg)
                            parent.layer.close(index);
                            parent.location.reload();
                        }else {
                            layer.msg(res.msg)
                        }
                        return false;
                    }
                });
                return false;
            });
        });


        //商品分类
        $(function () {
            var $sort = null;
            var $tree = null;
            var $status = false;
            var $data = null;
            var $cateId = 0;

            function create(data) {
                if (!data || data.length < 1) return;
                for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                    if (data[i].child && data[i].child.length > 0) {
                        tpl += '<li><h3><i>+</i><span style="background:#918597" data-id=' + data[i].id + '>' +data[i].id+ data[i].name + '</span></h3><ul style="display: block;">' + create(data[i].child) + '</ul></li>';
                    } else {
                        tpl += '<li><h3><b data-id=' + data[i].id + '>' + data[i].id +data[i].name + '</b></h3></li>';
                    }
                }
                return tpl;
            }


            //商品分类初始化
            function init() {
                $tree = $('<ul class="sp-tree"></ul>').appendTo($('#categoryDIV'));

                $(document).click(function (e) {
                    if ($status) {
                        $tree.hide();
                        $status = false;
                    }
                });
                $tree.delegate('i', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var _h = _this.parent('h3');
                    var _box = _h.next('ul');
                    if (_box.css('display') === 'none') {
                        _box.show();
                        _this.html('-');
                    } else {
                        _box.hide();
                        _this.html('+');
                    }
                });
                $tree.delegate('b', 'click', function (e) {
                    e.stopPropagation();
                    $sort.val($(this).text());
                    $("#categoryId").val($(this).attr('data-id'));
                    $tree.hide();
                    $status = false;
                    $cateId = $(this).attr('data-id');
                    console.log($(this).attr('data-id') + " + " + $cateId);
                });
                $tree.click(function (e) {
                    e.stopPropagation();
                });
            }

            function render() {
                $tree.html(create($data));
                $sort = $('#sp-sort');
                $sort.click(function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var pos = _this.offset();
                    var x = 0;//pos.left - 280;
                    var y = 40;//pos.top + _this.outerHeight() - 60;
                    $tree.css({
                        left: x,
                        top: y
                    }).show();
                    $status = true;
                });
            }

            // ajax 获得分类数据 完成后执行 init()
            $.ajax({
                url: '/ajax_goods/json_category',
                type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                success: function (res) {
                    // $data = res.msg;
                    // $data.replace(/&quot;/g,'\"');
                    $data = eval('(' + res.msg + ')');
                    console.log($data);

                    init();
                    render();
                }
            });
        })
    </script>
      </div>
    </div>
</div>
</body>
<html>
